<template>
  <div class="home">
    <van-nav-bar style="background: #4d8ee1"
                 fixed>
      <template slot="title">
        <van-button color="#4d8ee1"
                    @click="$router.push('/address')">{{
          currentAddress.address_detail || currentAddress.address || '长沙'
        }}</van-button>
      </template>

      <template #left>
        <van-icon to="/home"
                  name="search"
                  size="22"
                  color="white"
                  @click="$router.push('/search')" />
      </template>
      <template #right>
        <van-icon name="user-o"
                  size="22"
                  color="white"
                  @click="$router.push('/profile')" />
      </template>
    </van-nav-bar>
    <div class="main">
      <van-swipe class="my-swipe"
                 indicator-color="#4d8ee1">
        <van-swipe-item>
          <van-grid :border="false"
                    :column-num="4"
                    icon-size="42px">
            <van-grid-item v-for="value in list1"
                           :key="value.id"
                           :icon="'https://fuss10.elemecdn.com' + value.image_url"
                           :text="value.title"
                           @click="$router.push(`/home/title=${value.title}&restaurant_category_id=${value.id}`)" />
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid :border="false"
                    :column-num="4"
                    icon-size='40px'>
            <van-grid-item v-for="item in list2"
                           :key="item.id"
                           :icon="'https://fuss10.elemecdn.com' +item.image_url"
                           :text="item.title"
                            @click="$router.push(`/home/title=${item.title}&restaurant_category_id=${item.id}`)" />
          </van-grid>
        </van-swipe-item>
      </van-swipe>
      <van-cell-group>
        <van-cell title="附近商家"
                  icon="shop-o"
                  style="color: #ccc" />
      </van-cell-group>
      <shopList />
    </div>
  </div>
</template>

<script>
import { getFoodList } from '@/api/shop'
import shopList from './components/shop'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      list1: [],
      list2: [],
      img_url: '',
    }
  },
  computed: {
    ...mapState(['currentAddress']),
  },
  components: {
    shopList,
  },
  created () {
    this.getFoodList()
  },
  methods: {
    async getFoodList() {
      
      const { data } = await getFoodList()
      
     
        this.list1 = data.slice(0, 8)

      this.list2 = data.slice(8)


    },
    
  }
}
</script>

<style>
.home {
  background-color: #f5f5f5;
  height: 92vh;
}
.main {
  margin-top: 46px;
}
.my-swipe {
  height: 188px;
  margin-bottom: 10px;
}
.van-grid-item__content {
  padding: 10px 8px;
}
.van-swipe__indicator {
  width: 8px;
  height: 8px;
}
</style>
